<template>

  <div>
    <v-header></v-header>
    <div class="ris_cont">
    <!--删选条件-->
    <div class="selectedAll">
      <table class="selectedAll_tab">
        <tr>
          <td>姓名</td>
          <td><input type="text" v-model="name"/></td>
          <td>性别</td>
          <td><select v-model="sex">
            <option></option>
            <option>男</option>
            <option>女</option>
          </select></td>
          <td>身份证号</td>
          <td><input type="text" v-model="ssid"/></td>
          <td>门诊/住院号</td>
          <td><input type="text" v-model="applyno"/></td>
          <td>设备类型</td>
          <td>
            <select v-model="eqptypecode">
            <option value=""></option>
            <option v-for="type in eqptypeList" :value="type.code">{{type.name}}</option>
          </select>
          </td>
        </tr>
        <tr>
          <td>设备名称</td>
          <td>
            <select v-model="eqpcode">
              <option value=""></option>
              <option v-for="equip in equipList" :value="equip.code" v-if="equip.eqptypecode==eqptypecode||eqptypecode==''">{{equip.name}}</option>
            </select>
          </td>
          <td>影像号</td>
          <td><input type="text" v-model="accessno"/></td>
          <td>档案号</td>
          <td><input type="text" v-model="recordno"/></td>
          <td>开始时间</td>
          <td><input type="date" v-model="begintime"></td>
          <td>结束时间</td>
          <td><input type="date" v-model="endtime"></td>
          <!--<td class="dataTime" colspan="3">-->
          <!--<input type="date" />-->
          <!--<span>至</span>-->
          <!--<input type="date"/>-->
          <!--</td>-->
        </tr>
        <tr>
          <td>是否建档</td>
          <td>
            <select v-model="isrecord">
              <option></option>
              <option value="1">已建档</option>
              <option value="0">未建档</option>
            </select>
          </td>
          <td colspan="8"><button class="button btn_blur search_listAll" @click="search">查询</button></td>
        </tr>
      </table>
    </div>


    <!--查询出来的全部人物的列表-->
    <div class="AllList" v-loading="loading">
      <h1 class="list_h1_head">查询出来的全部人员
        <div>
          <button class="button btn_green" @click="showmodal=true">加入</button>
        </div>
      </h1>
      <table>
        <thead>
        <tr>
          <th><input type="checkbox"></th>
          <th>姓名</th>
          <th>拼音码</th>
          <th>性别</th>
          <th>年龄</th>
          <th>身份证号</th>
          <th>申请单号</th>
          <th>登记时间</th>
          <th>患者类型</th>
          <th>设备类型</th>
          <th>设备名称</th>
          <th>影像号</th>
          <th>档案号</th>
          <th>状态</th>
        </tr>
        </thead>
        <tbody class="AllList_body">
        <tr v-for="pat in patInfoList">
          <td><input type="checkbox" v-model="checked" :value="pat"></td>
          <td>{{pat.cname}}</td>
          <td>{{pat.ename}}</td>
          <td>{{pat.sex}}</td>
          <td>{{pat.age}}</td>
          <td  style="width: 160px;">{{pat.ssid}}</td>
          <td>{{pat.applyno}}</td>
          <td>{{pat.regtimeStr}}</td>
          <td>{{pattypefilter(pat.pattypecode)}}</td>
          <td>{{pat.eqptypename}}</td>
          <td>{{pat.eqpname}}</td>
          <td>{{pat.accessno}}</td>
          <td style="width: 160px;">{{pat.recordno}}</td>
          <td>{{pat.recordno | isrecordfilter}}</td>
        </tr>
        </tbody>
      </table>
    </div>

    <!--修改标记的模态-->
    <div class="moveBar" v-if="showmodal">
      <div id="banner">
        <h1 class="list_h1_head">被选中的人物
          <div>
            <!--<button class="button btn_yellow" id="change_token">修改标记</button>-->
            <input type="text" v-model="setrecord"/>
            <button class="button btn_green" @click="record">确认建档</button>
            <span class="button" style="padding: 4px 10px" @click="showmodal=false">X</span>
          </div>
        </h1>
      </div>
      <div class="content aList">
        <table>
          <thead>
          <tr>
            <th>姓名</th>
            <th>拼音码</th>
            <th>性别</th>
            <th>年龄</th>
            <th>身份证号</th>
            <th>申请单号</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody class="aList_body">
          <tr v-for="pat in checked">
            <td>{{pat.cname}}</td>
            <td>{{pat.ename}}</td>
            <td>{{pat.sex}}</td>
            <td>{{pat.age}}</td>
            <td>{{pat.ssid}}</td>
            <td>{{pat.applyno}}</td>
            <td><button class="button btn_yellow">移除</button></td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>


    </div>
  </div>

</template>

<script>
  import Header from '@/components/Header/Header'
    export default {
      components: {
        'v-header': Header
      },
      created () {
        this.$http.get(window.localStorage.url+"/base/getDeptEqpEqptypeByActor")
          .then(function (res) {
            // console.log(res.data);
            if(res.data.status=='SUCCESS'){
              this.eqptypeList=res.data.eqptypeList;
              // this.deptList=res.data.deptList;
              this.equipList=res.data.equipList;
            }
          });

        this.$http.get(window.localStorage.url+"/base/getPattype")
          .then(function (res) {
            // console.log(res.data);
            if(res.data.status=='SUCCESS'){
              this.pattypeList=res.data.data;
            }
          });
      },
      data () {
        return {
          eqptypeList:[],
          equipList:[],
          pattypeList:[],

          checked:[],

          patInfoList:[],

          showmodal:false,
          loading:false,

          name:"",
          sex:"",
          ssid:"",
          applyno:"",
          eqptypecode:"",
          eqpcode:"",
          accessno:"",
          recordno:"",
          begintime:this.formatday(new Date()),
          endtime:this.formatday(new Date()),
          isrecord:"",

          setrecord:""
        }
      },
      methods : {
        search () {
          this.loading=true;
          var eqptypecodes=[];
          for(var i in this.eqptypeList){
            eqptypecodes.push(this.eqptypeList[i].code);
          }

          this.$http.get(window.localStorage.url+"/pat/searchPatInfo?begintime="
            +this.begintime+"&endtime="+this.endtime+"&eqptypecode="+this.eqptypecode
            +"&eqptypeList="+JSON.stringify(eqptypecodes) + "&name=" + this.name
            + "&sex=" + this.sex + "&ssid=" + this.ssid + "&applyno=" + this.applyno
            + "&eqpcode=" + this.eqpcode + "&accessno=" + this.accessno + "&recordno=" + this.recordno
            + "&isrecord=" + this.isrecord)
            .then(function (res) {
                this.loading=false;
                if(res.data.status=='SUCCESS') {
                  this.patInfoList = res.data.data;

                }else {

                }
              }
            ).catch(err=>{
            this.loading=false;
            this.$notify.error({
              title: '失败',
              message: '查询失败',
              duration: 3000,
              offset: 35
            });
          });
        },
        record () {
          var ids=[];
          for(var i in this.checked){
            ids.push(this.checked[i].id);
          }

          this.$http.get(window.localStorage.url+"/pat/record?ids=" + JSON.stringify(ids)
          + "&recordno=" + this.setrecord)
            .then(response=>{
            if(response.data.status=='SUCCESS'){
              this.search();
              this.showmodal=false;
              this.$notify({
                title: '成功',
                message: '建档成功',
                duration: 2000,
                offset: 35,
                type: 'success'
              });
            } else{
              this.$notify.error({
                title: '失败',
                message: '建档失败',
                duration: 3000,
                offset: 35
              });
            }
          });
        },
        formatday(date) {
          var seperator1 = "-";
          var month = date.getMonth() + 1;
          var strDate = date.getDate();
          if (month >= 1 && month <= 9) {
            month = "0" + month;
          }
          if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
          }
          var dateStr = date.getFullYear() + seperator1 + month + seperator1 + strDate
          return dateStr;
        },
        pattypefilter (pattypecode) {
          // console.log(this.pattypeList);
          for(var i in this.pattypeList) {
            if (pattypecode == this.pattypeList[i].code) {
              return this.pattypeList[i].name
            }
          }
          return ''
        }
      },
      filters:{
        isrecordfilter (recordno) {
          if(recordno==""||recordno==undefined||recordno==null){
            return '未建档'
          } else {
            return '已建档'
          }
        },
      }
    }
</script>

<style scoped>
  .selectedAll{
    min-width: 1300px;
    line-height: 40px;
    width: 100%;
    /*float: left;*/
    background: #fff;
  }
  .selectedAll_tab{
    width: 96%;
    margin: 0 auto;
  }
  .selectedAll_tab tr td:nth-child(1),.selectedAll_tab tr td:nth-child(3),.selectedAll_tab tr td:nth-child(5),.selectedAll_tab tr td:nth-child(7),.selectedAll_tab tr td:nth-child(9){
    width: 7%;
    text-align: justify;
    text-align-last: justify;
    padding: 0 5px;
  }
  .selectedAll_tab tr td:nth-child(2){width: 13%;}
  .selectedAll_tab tr td:nth-child(4){width: 13%;}
  .selectedAll_tab tr td:nth-child(6){width: 13%;}
  .selectedAll_tab tr td:nth-child(8){width: 13%;}
  .selectedAll_tab tr td:nth-child(10){width: 13%;}
  .selectedAll_tab input,.selectedAll_tab select{
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }

  /*全部查询的人物*/
  .AllList{
    width: 98%;
    margin: 0 auto;
    line-height: 36px;
    min-width: 1300px;
  }
  .AllList table{
    background: #fff;
  }
  .AllList tr th{
    background: #999;
    color: #fff;
  }
  .AllList tr td,.AllList tr th{
    border: 1px solid #ddd;
    text-align: center;
  }
  .AllList table input[type=checkbox]{
    position: relative;
    top: 5px;
    cursor: pointer;
  }



  .aList{
    width: 100%;
    margin: 0 auto;
    line-height: 36px;
    /*min-width: 1300px;*/
  }
  .aList table{
    background: #fff;
  }
  .aList tr th{
    background: #999;
    color: #fff;
  }
  .aList tr td,.AllList tr th{
    border: 1px solid #ddd;
    text-align: center;
  }
  .aList table input[type=checkbox]{
    position: relative;
    top: 5px;
    cursor: pointer;
  }


  .search_listAll{
    width: 120px;
    text-align-last: center;
    display: block;
    float: right;
    padding: 4px 20px;
  }

  .list_h1_head{
    position: relative;
    color: #666;
    background: #f7f7f9;
  }
  .list_h1_head button{
    width: 90px;
    padding: 4px 20px;
  }
  .list_h1_head>div{
    position: absolute;
    right: 0px;
    text-align-last: center;
    top: 0px;
  }

  .moveBar {
    position: absolute;
    width: 600px;
    height: 300px;
    background: #fff;
    border: solid 1px #aaa;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  #banner {
    background: #ededed;
    cursor: pointer;
    line-height: 36px;
    user-select: none;
    padding: 0 10px;
  }
  #banner:hover{
    opacity:.9;
  }

</style>
